<template>
<page-view class="flex-column">
    <title-bar>分类</title-bar>
    <div class="content-box flex-1 flex-row">
        <div class="left">
            <li v-for="(item,index) in allCategoryInfoList" :key="item.id"
                @click="selectedIndex = index" :class="{'selected':index == selectedIndex}">
                {{item.category_name}}
            </li>
        </div>
        <div class="right">
            <div class="wrapper" ref="wrapper">
                <div class="content">
                    <div class="food-list-box" v-for="(item) in allCategoryInfoList" :key="item.id">
                        <h3 class="text-primary" ref="categoryName">{{item.category_name}}</h3>
                        <food-item  v-for="(sub_item) in item.foodInfoList" :key="sub_item.id" :fitem="sub_item"></food-item>
                    </div>
                </div>
            </div>
        </div>
    </div>
</page-view>
</template>
<script>
import Api from "../utils/Api";
import foodItem from "../components/food-item.vue";
import BScroll from "better-scroll";

export default{
    name:"category",
    data(){
        return {
            allCategoryInfoList:[],
            selectedIndex:0,
            scroll:null
        }
    },
    methods:{
        async getAllCategoryInfoList(){
            this.showLoading("正在加载菜品分类。。。");
            setTimeout(async() => {
                let result = await Api.categoryInfo.getAllList();
                this.allCategoryInfoList = result;
            },100)
            
        }  
    },
    created(){
        this.getAllCategoryInfoList();
    },
    mounted(){
        this.$nextTick(() => {
            if(!this.scroll){
                this.scroll = new BScroll(this.$refs.wrapper,{});
                this.scroll.refresh();
            }
        })
    },
    components:{
        foodItem
    },
    watch:{
        selectedIndex(newValue){
            this.scroll.scrollToElement(this.$refs.categoryName[newValue],1000);
        }
    },
    updated(){
        this.scroll.refresh();
    }
};
</script>

<style scoped lang="scss">
@import "../assets/scss/com.scss";
.wrapper{
    height: 100%;
    overflow: hidden;
    @media only screen and (min-width: 769px) {
        &{
            overflow: auto;
        }
    }
}
.left{
    width: 1.1rem;
    background-color: #ececec;
    >li{
        height: .3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: .01rem solid #dcdcdc;
        &.selected{
            font-weight: bold;
            color: $primaryColor;
            background-color: white;
        }
    }
    
}
.right{
    flex: 1;
    overflow: auto;
}
</style>